<template>
  <div>
    <div id="map"></div>
    <div id="routes"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

let map = null;
const initMap = () => {
  AMapLoader.load({
    key: "d959c302cdb3706d9fdf26105f59e148", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
    .then((AMap: any) => {
      // 初始化地图
      map = new AMap.Map("map", {
        center: [117.24, 31.8],
        zoom: 15,
      });
      // 添加marker
      const marker = new AMap.Marker({
        position: [117.24, 31.8],
        title: "合肥",
      });
      // 添加图层
      map.add(marker);
      // 插件
      // 引入插件
      AMap.plugin(["AMap.Weather", "AMap.Driving"], () => {
        // 使用提天气插件
        const weather = new AMap.Weather();
        // weather.getLive("合肥市", function (err: any, data: any) {
        //   console.log(err, data);
        // });
        weather.getForecast("合肥市", function (err: any, data: any) {
          console.log(err, data);
        });

        var driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME,
          panel: "routes", // 驾车规格结果 渲染容器
        });
        var points = [
          { keyword: "合肥站", city: "合肥" },
          { keyword: "合肥南站", city: "合肥" },
        ];
        driving.search(points, function (status: any, result: any) {
          // 未出错时，result即是对应的路线规划方案
          console.log(status, result);
        });
      });
    })
    .catch((e: any) => {
      console.error(e); //加载错误提示
    });
};
onMounted(() => {
  initMap();
});
defineOptions({
  name: "DashBoard",
});
</script>

<style scoped lang="scss">
#map {
  width: 800px;
  height: 600px;
  margin: 30px auto;
}
</style>
